{% extends "baseD.html" %}

{% block headtitle %}- View Pan-Tilt-Zoom Scene {% endblock %}

{% block divtitle %}- View Pan-Tilt-Zoom Scene {% endblock %}

{% block css %}
	<link href="/live3dstatic/css/viewScene.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}


{% block scripts %}
	<script type="text/javascript" src="/live3dstatic/scripts/helperFunctions.js"> </script>
	<script type="text/javascript" src="/live3dstatic/scripts/earth.js"> </script>
	<script type="text/javascript" src="/live3dstatic/scripts/calibration.js"> </script>
	<script type="text/javascript" src="/live3dstatic/scripts/ptzCalibration.js"> </script>
	<script type="text/javascript" src="/live3dstatic/scripts/matrix.js"> </script>

	<script type="text/javascript">
		{% if calib %}
			var ptzCalib;
			function initCalibration(){
				var origin = {lat: {{calib.originLatitude}}, lon: {{calib.originLongitude}}, alt: {{calib.originAltitude}}};
				var cameraPosition = {x: {{calib.tx}}, y: {{calib.ty}}, z: {{calib.tz}}, lat: {{scene.cameraLatitude}}, lon: {{scene.cameraLongitude}}, alt: {{scene.cameraAltitude}}};
				var zoomRanges = new Array({{scene.zoomOutRange}}, {{scene.zoomInRange}});
				var panRanges = new Array({{scene.panLeftRange}}, {{scene.panRightRange}});
				var tiltRanges = new Array({{scene.tiltDownRange}}, {{scene.tiltUpRange}});
				var totalPanRad = {{scene.totalPanDegrees}} * PI / 180;
				var totalTiltRad = {{scene.totalTiltDegrees}} * PI / 180;
				ptzCalib = new PTZCalibration('{{scene.baseURL}}', origin, cameraPosition, 
				                        {{calib.focalLengthF1}}, {{calib.focalLengthF2}}, {{calib.focalLengthF3}},
										{{calib.panOffsetRad}}, {{calib.tiltOffsetRad}}, {{calib.rollOffsetRad}},
										panRanges, tiltRanges, zoomRanges,
										totalPanRad, totalTiltRad,
										{{scene.width}}, {{scene.height}},
										'{{scene.url}}')
										
				setInterval('ptzCalib.refresh()', 1000);
			}
			
			function init3D() {
				initCalibration()
			}
		{% else %}
			function init3D() {
			}
		{% endif %}

		// Start Brandon Code

		window.onresize = buildWindowResize;

		function buildWindowResize() {
			var windowHeight = window.innerHeight;
			var geHeight = windowHeight - 180;
			
			document.getElementById('map3d').style.height = geHeight + "px";
		}

		// Navigation menus
		var menuActive = false;
		var menuOpen = 'none', prevMenuOpen = 'none', buttonOpen = 'none';
		function openMenu(menuID, buttonID) {
			if ( menuID == prevMenuOpen ) {
				prevMenuOpen = 'none';
			} else {
				document.getElementById(menuID).style.display = "block";
				toggleActiveButton(buttonID);
				menuOpen = menuID;
				buttonOpen = buttonID;
			}
		}
		function closeActiveMenu() {
			if ( menuOpen != 'none' ) {
				document.getElementById(menuOpen).style.display = "none";
				toggleActiveButton(buttonOpen);
				
				prevMenuOpen = menuOpen;
				menuOpen = 'none';
			}
		}
		function toggleActiveMenu(bool) {
			menuActive = bool;
		}
		function toggleActiveButton(buttonID) {
			var buttonObj = document.getElementById(buttonID);

			if ( buttonObj.style.backgroundPosition == '50% -31px' || buttonObj.style.backgroundPosition == 'center -31px' ) {
				buttonObj.style.borderColor = '#CCCCCC';
				buttonObj.style.backgroundPosition = 'center 0px';
				buttonObj.style.color = "#b5b5b5";
			} else {
				buttonObj.style.borderColor = '#777777';
				buttonObj.style.backgroundPosition = 'center -31px';
				buttonObj.style.color = "#777777";
			}
		}

		function toggleRatingMessage() {
			var stars = document.getElementById('stars');
			var notLogged = document.getElementById('notLogged');

			if ( notLogged.style.display == "none" ) {
				notLogged.style.display = "block";
				stars.style.display = "none";
			} else {
				notLogged.style.display = "none";
				stars.style.display = "block";
			}
		} 
		function toggleRatedMessage() {
			var stars = document.getElementById('stars');
			var alreadyVoted = document.getElementById('alreadyVoted');

			if ( alreadyVoted.style.display == "none" ) {
				alreadyVoted.style.display = "block";
				stars.style.display = "none";
			} else {
				alreadyVoted.style.display = "none";
				stars.style.display = "block";
			}
		} 

		var rating_order = ["off","off","off","off","off"];
		function highlightRating(num) {
			for ( var i = 1; i <= num; i++ ) {
				document.getElementById("star_"+i).className = "star_vote";
			}
		}
		function resetRating() {
			for ( var i = 1; i <= 5; i++ ) {
				document.getElementById("star_"+i).className = "star_"+rating_order[i-1];
			}
		}

		// End Brandon Code
	</script>
{% endblock %}

{% block onload %}googleInit() {% endblock %}

{% block content %}
	<div id="page">
		<div id="leftside">
			<div id="imageButtonWrapper">1
				<div id="imageSettingsButton" title="Image Settings" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)" onclick="closeActiveMenu();openMenu('imageSettingsDropdown',this.id);"></div> 
				<div id="imageSettingsDropdown" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)">
					{% if scene.is_private %} <!-- scene.is_private -->
						<br />
						<h3>Scene options</h3>
						<div style="margin-left: 25px;">
							Your scene is currently visible only to you.<br />
							<form style="float:left;margin-top:5px;" action='makePublic' method='post' >
								<input type='hidden' name='scene' value='{{scene.index}}'>
								<input type='submit' style="cursor:pointer;" value='Make Scene Public'>
							</form>
							<form style="float:left;margin:5px 0 0 5px;" action='adminModify' method='post' onsubmit="return confirm('Are you sure you want to delete the entire scene?  This is irreversible.');">
								<input type='hidden' name='scene' value='{{scene.index}}'>
								<input type='hidden' name='deleteScene' value='yes'>
								<input type='submit' style="cursor:pointer;" value='Delete Scene'>
							</form>
						</div>
						<div style="clear:both;"></div>
					{% endif %}

					{% if admin %} <!-- admin -->
						<br />
						<h3>Admin control</h3>
						<form action='adminModify' method='post' onsubmit="return confirm('Are you sure you want to delete the entire scene? This is irreversible.');" style="margin:5px 0 0 25px;">
							<input type='hidden' name='scene' value='{{scene.index}}'>
							<input type='hidden' name='deleteScene' value='yes'>
							<input type='submit' style="cursor:pointer;" value='Delete Scene'>
						</form>
						<div style="margin-left: 25px;">
							Panorama Montage: <input type="checkbox" id="montageBox" /><br/>
                            Take picture: <input type="checkbox" id="montageReadyBox" unchecked/><br/>
						</div>
					{% endif %}
				</div>

				<div id="addPointsButton" title="Add/Modify Points" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)" onclick="closeActiveMenu();openMenu('addPointsDropdown',this.id);"></div> 
				<div id="addPointsDropdown" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)">
					<h3>Add/Modify Points</h3>
					<input type="button" style="cursor:pointer;margin:20px 0 0 5px;" value="Add Points to Scene" onclick="parent.location='build?scene={{ scene.index }}'" />
				</div>

				<div id="viewAllScenesButton" title="View All Scenes" onclick="closeActiveMenu();parent.location='viewAll';">View All</div> 
			</div>

			<div class="group">
				<span id="viewingTitle">
					Viewing PTZ 
					{% if scene.name %}
						({{scene.name}})
					{% else %}
						(Scene)
					{% endif %}
				</span>

				{% if scene.sourceURL %}
					<span id="from_text">From <a href="{{scene.sourceURL}}">{{scene.sourceURL}}</a></span>
				{% endif %}

				{% if scene.amosId %}
					AMOS information: <a href="http://amosweb.cse.wustl.edu/camera?id={{scene.amosId}}"> Camera {{scene.amosId}}</a><br/>
				{% endif %}

				<div id="PTZappletGroup">
                    <applet id="ptzApplet" archive="LiveApplet.zip" codebase="{{scene.codeBaseURL}}" code="LiveApplet.class" width="450" height="380">
                        <param name="cabbase"   value="LiveApplet.cab"/>
                        <param name="video_width"       value="320"/>
                        <param name="url"               value="{{scene.baseURL}}"/>
                        <param name="show_fps" value="off"/>
                        <param name="show_position" value="off"/>
                        <param name="show_logo"   value="off"/>
                        <param name="locale" value="english"/>

                        <param name="sleep"             value="300"/>
                        <param name="show_counter"   value="off"/>
                        <param name="show_backlightbutton" value="on"/>
                        <param name="show_panobutton" value="on"/>
                        <param name="bg_color" value="#f0f"/>
                        <param name="copyright" value="{{scene.baseURL}}"/>
                        <param name="doc" value="1"/>
                    </applet>
                </div>

				<p id="datetime"></p>
				 
				 <div style="margin-top: 20px;" 
					{% if not username %}
						onmouseover="toggleRatingMessage()" onmouseout="toggleRatingMessage()"
					{% else %}
						{% if not votable %}onmouseover="toggleRatedMessage()" onmouseout="toggleRatedMessage()"{% endif %}
					{% endif %}
				>
				
					<div id="stars" onmouseout="resetRating()">
						{% for i in stars %}
							<div id="star_{{forloop.counter}}" onclick="parent.location='../rate?scene={{scene.index}}&amp;rating={{forloop.counter}}'" onmouseover="highlightRating({{forloop.counter}});" class="{%if i %}star_on{%else%}star_off{%endif%}"></div>
							<script type="text/javascript">rating_order[{{forloop.counter}}-1] = {% if i %}"on"{% else %}"off"{% endif %}</script>
						{% endfor %}
					</div>
					<div style="clear:both;"></div>
					<div id="alreadyVoted" style="height:26px;line-height:26px;display:none;">You have already rated this scene!</div>
					<div id="notLogged" style="height:26px;line-height:26px;display:none;"><a href="{{logInURL}}">Log in</a> to rate a scene.</div>
				</div>
				<br/>
				{% if scene.ratingAverage %}
					<div style="padding-bottom:10px;">Rating: {{scene.ratingAverage|floatformat}} out of 5</div>
				{% else %}
					<div style="padding-bottom:10px;">This scene has not been rated.</div>
				{% endif %}
			</div>
		</div>

		<div id="rightside">
			<div id="sceneButtonWrapper">
				<div id="sceneSettingsButton" title="Map Settings" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)" onclick="closeActiveMenu();openMenu('sceneSettingsDropdown',this.id);"></div> 
				<div id="sceneSettingsDropdown" onmouseover="toggleActiveMenu(true)" onmouseout="toggleActiveMenu(false)">
					<h3>View options</h3>
					<div style="margin:5px 0 0 20px;">
						Automatically reset view: <input type="checkbox" id="autoReset" checked />
					</div>
					<br />
					<form name="visualize">
						<span class="h3">Show structures</span><br />	
						<div style="margin:5px 0 0 20px;">				
							<input type="checkbox" onchange="toggleBuildings();" id="showBuildings" checked style="margin:3px;cursor:pointer;"/>
							<label for="showBuildings">  Buildings </label>
							<input type="checkbox" onchange="toggleGrayBuildings();" id="showGrayBuildings" checked style="cursor:pointer; margin:3px; margin-left:10px; "/>
							<label for="showGrayBuildings">  Gray buildings </label>
						</div>
					</form><!-- End visualize form -->
					{% if scene.calibrated %}<!-- scene.calibrated -->
						<br />
						<h3>Camera frustum</h3>
						<div style="margin:5px 0 0 20px;" id="viewFrust">
		                    <label for="">View frustum: </label>
		                    <input type="checkbox" id="frustumBox" style="cursor:pointer;" onchange="calib.toggleFrustum()"/>
		                    <label for="edgeLength" style="margin-left:10px;">Length (meters): </label>
		                    <input type="text" id="edgeLength" value="50" size="2" onfocus="this.select();" onchange="calib.updateFrustum()">
		       			</div><!-- end viewFrust -->
		       		{% endif %}
				</div>
			</div>

			<div id="gecontainer">
				<div id='map3d'></div>
			</div>
		</div>

		<div style="clear:both;"></div>
	</div>

	<script type="text/javascript">buildWindowResize();</script>
{% endblock %}
		
{% block scripts2 %} {% endblock %}